<template>
    <div>
        <basic-container>
            <avue-form :option="searchOption" v-model="searchForm" @submit="searchSubmit"></avue-form>
            <el-row>
                <el-col :span="12">
                    <el-button type="primary" @click="handleAdd(null,null)">添加</el-button>

                </el-col>
                <el-col :span="12">

                </el-col>
            </el-row>
            <Table row-key="id" :columns="tableOption" :data="tableData" border>
                <template slot-scope="{ row }" slot="name">
                    <strong>{{ row.name }}</strong>
                </template>
                <template slot-scope="{ row, index }" slot="action">
                    <el-button type="text" size="small" style="margin-right: 5px" @click="handleAdd(row,index)">添加子项
                    </el-button>
                    <el-button type="text" size="small" style="margin-right: 5px" @click="handleUpdate(row,index)">修改
                    </el-button>
                    <el-button type="text" size="small" @click="handleDel(row,index)">删除</el-button>
                    <iot-form-dialog :title="title" :visible.sync="dialogFormVisible" :option="formOption"
                                     v-model="form"
                                     @handleSubmit="handleSubmit"></iot-form-dialog>

                </template>
            </Table>
            <Page style="text-align: right;margin-top: 10px" :total="page.total" :pageSize="page.pageSize"
                  show-elevator show-sizer
                  @on-page-size-change="currentPageSize" @on-change="currentNote" show-total></Page>

        </basic-container>
    </div>
</template>

<script>
    import {mapGetters} from "vuex";
    import {getRoleData} from '@/api/admin'
    import {getMenuAll} from '@/api/user'
    import {update, del, add, roleMenuSetting, listLoad} from '@/api/admin/dept'
    import {deptOption, deptFormOption, deptFormModelOption} from "@/const/admin/adminTabelOption";
    import IotFormDialog from "../../../page/dialog/iot-form-dialog";

    export default {
        name: "role",
        components: {IotFormDialog},
        data() {
            return {
                title: "",
                searchForm: {},
                menuAll: [],
                dialogFormVisible: false,
                tableOption: deptOption.column, //表格设置属性
                formOption: deptFormModelOption,
                searchOption: deptFormOption,
                form: {},
                tableData: [], //表格的数据
                tablePage: 1,
                tableLoading: false,
                tableObj: {},
                page: {
                    total: 0, //总页数
                    currentPage: 1, //当前页数
                    pageSize: 10 //每页显示多少条
                },
                grade: {
                    box: false,
                    check: []
                }
            }
        },
        watch: {},
        mounted() {
            this.handleList(this.page, this.searchForm);
        },
        computed: {
            ...mapGetters(["permission"])
        },
        props: [],
        methods: {
            handleSubmit(form, done) {
                let dto = form;
                if (dto.id !== undefined&&dto.id !== null) {
                    update(dto).then(res => {
                        this.$message.success("操作完成")
                    }).catch(err => {
                        this.$message.error("网络异常:" + err)
                    });
                } else  {

                    add(dto).then(res => {
                        this.$message.success("操作完成")
                    }).catch(err => {
                        this.$message.error("网络异常:" + err)
                    });

                }

                setTimeout(() => {
                    this.handleList(this.page, this.searchForm);
                    done()
                }, 1000)
            },
            currentNote(pageNumber) {

                this.page.currentPage = pageNumber;
                this.handleList(this.page, this.searchForm)
            },
            currentPageSize(pageNumber) {
                this.page.pageSize = pageNumber;
                this.handleList(this.page, this.searchForm)
            },
            searchSubmit(form, done) {

                this.handleList(this.page, form);
                setTimeout(() => {
                    done()
                }, 1000)
            },
            /**
             * @title 权限更新
             *
             **/
            handleGradeUpdate() {

                const halfChecked = this.$refs.tree.getHalfCheckedKeys();
                const checked = this.$refs.tree.getCheckedKeys();
                this.tableObj.check = checked.concat(halfChecked);

                let dto = {
                    roleId: this.tableObj.id,
                    list: this.tableObj.check
                };

                roleMenuSetting(dto).then(res => {
                    this.$message.success("操作完成")
                }).catch(err => {
                    this.$message.error("网络异常:" + err)
                });

                this.tableObj = {};
                this.grade.check = new Array();
                this.grade.box = false;
            },
            /**
             * @title 权限选择
             *
             **/
            handleGradeCheckChange(data, checked) {
                if (checked) {
                    this.grade.check.push(data.id);
                } else {
                    this.grade.check.splice(this.grade.check.indexOf(data.id), 1);
                }
            },
            /**
             * @title 打开权限
             */
            handleGrade(row) {
                getMenuAll().then(res => {
                    const data = res.data.data;
                    this.grade.box = true;
                    this.tableObj = row;
                    this.menuAll = data;
                    this.grade.check = this.tableObj.check;
                });

            },

            /**
             * @title 获取数据
             * @detail 赋值为tableData表格即可
             *
             **/
            handleList(page, searchDto) {
                let dto = {
                    page: 1,
                    limit: 10
                };
                if (page) {
                    dto.page = page.currentPage;
                    dto.limit = page.pageSize;
                }
                if (searchDto) {
                    dto.data = searchDto;
                }
                this.tableLoading = true;
                listLoad(dto).then(res => {
                    const data = res.data.data;
                    this.tableData = data.list;

                    this.page.currentPage = data.pages;
                    this.page.total = data.total;

                    this.tableLoading = false;
                });

            },
            /**
             * @title 数据添加
             * @param row 为当前的数据
             * @param done 为表单关闭函数
             *
             **/
            refreshChange(data) {
                this.handleList(data.page, data.searchForm)
            },
            searchChange(form, done) {
                this.searchForm = form;
                this.handleList(this.page, form);
                done()
            },

            /**
             * @title 数据删除
             * @param row 为当前的数据
             * @param index 为当前更新数据的行数
             *
             **/
            handleDel(row, index) {
                let dto = row;
                this.$confirm(`是否确认删除序号为${row.name}`, "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        del(dto.id).then(res => {
                            this.$message.success("操作完成")

                        }).catch(err => {
                            this.$message.error("网络异常:" + err)
                        });

                    })
                    .catch(() => {
                    });
                setTimeout(() => {
                    this.handleList(this.page, this.searchForm);
                }, 1000)
            },
            /**
             * @title 数据更新
             * @param row 为当前的数据
             * @param index 为当前更新数据的行数
             * @param done 为表单关闭函数
             *
             **/
            handleUpdate(row, index) {

                this.dialogFormVisible = true;
                row.handle = "upd";
                this.title = "编辑";
                this.form = row;

            },
            handleAdd(row, index) {
                this.dialogFormVisible = true;
                if (row !== null) {
                    this.title = "子添加";
                    this.form.handle = "cAdd";
                    this.form.parentId = row.id;
                } else {
                    this.form.handle = "add";
                    this.title = "添加";
                }
            }
        },
        created() {
           this.handleList(this.page, this.searchForm);
        }
    };
</script>

<style lang="scss" scoped>
    .table-container {
        padding: 8px 10px;
    }
</style>
